<template>
    <div class="itm">
      <input class="name" type="text" v-model="item.name" />
      <div class="btns">
        <div class="icon iconPlusSign" @click="addItem"></div>
        <div class="icon iconMinusSign" @click="removeItem"></div>
        <div class="icon iconArrowheadU" @click="moveItemBackward"></div>
        <div class="icon iconArrowheadD" @click="moveItemForward"></div>
        <label class="icon iconTickMark">
          <input class="chk" type="checkbox" />
        </label>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      item: Object
    },
    methods: {
      addItem() {
        this.$emit('add-item', this.item);
      },
      removeItem() {
        this.$emit('remove-item', this.item);
      },
      moveItemBackward() {
        this.$emit('move-item-backward', this.item);
      },
      moveItemForward() {
        this.$emit('move-item-forward', this.item);
      }
    }
  };
  </script>
  
  <style scoped>
  /* 组件特定样式 */
  </style>